// <style lang="scss" scoped>
// 边框特效
.middle-section {
  *{
    font-family: 'Noto Sans SC', 'Source Han Sans', sans-serif;
  }

  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 15px;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;

  .left-panel,
  .center-panel,
  .right-panel {
    height: 100%;
    box-sizing: border-box;
  }

  .left-panel {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 4px;
    padding: 30px 10px;
    overflow-y: auto; // 确保可以垂直滚动
    // 隐藏滚动条但保持滚动功能
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;

    /* Firefox */
    &::-webkit-scrollbar {
      /* Chrome, Safari and Opera */
      display: none;
    }

    border: 1px solid transparent;
    border-radius: 8px;

    .info-card {
      cursor: pointer;
      padding-top: 2px;
      position: relative;
      margin-bottom: 10px;
      margin-top: 10px;
      // padding: 10px;
      background: rgba(255, 255, 255, 0.05);
      border: none;
      border-radius: 4px;
      // line-height: 120%;
      min-height: 4rem;
      color: #c3c3c3;
      display: flex;
      align-items: center;
      /* 垂直居中 */
      // justify-content: center;
      /* 水平居中（可选） */
      height: auto;

      &:hover {
        background: rgba(255, 255, 255, 0.1);

        .info-title {
          font-size: 0.8em;

          span {
            transform: scale(1.1);
            font-size: 0.8em;
            color: #fff;
          }
        }
      }

      /* 高度动态 */
      .info-title {
        position: absolute;
        font-size: 0.7em;
        padding: 0;
        // font-size: 12px;
        opacity: 0.8;
        width: auto;
        // border: 1px solid rgba(255, 255, 255, 0.1);
        top: 2px;
        left: 5px;

        span {
          font-size: 0.8em;
        }

        &:hover {
          span {
            transform: scale(1.1);
            color: #2ed573;
            font-size: 0.8em;
          }
        }
      }

      .status-icon {
        position: absolute;
        width: 2rem;
        left: 13%;
        height: 1rem;
        // background-color: red;
        line-height: 1.0rem;
        font-size: 1.0rem;
        top: 0px;

        i {
          display: inline-block;
          width: 100%;
          height: 100%;
          line-height: 100%;

          // background-color: rgba(255, 255, 255, 0.186);
          svg {
            padding: 0;
            margin: 0;
          }

          svg.open-icon {
            color: #0ad35e;
          }

          svg.off-icon {
            color: red;
          }
        }

      }

      // 左侧核心设备参数栏中的启停标志
      &:nth-child(1) .status-icon {
        left: 15%;
      }

      &:nth-child(3) .status-icon {
        left: 12%;
      }

      &:nth-child(4) .status-icon {
        left: 15%;
      }

      &:nth-child(5) .status-icon {
        left: 15%;
      }

      &:nth-child(6) .status-icon {
        left: 12%;
      }

      &:nth-child(7) .status-icon {
        left: 21%;
      }

      &:nth-child(8) .status-icon {
        left: 21%;
      }

      .info-value {
        max-width: 30%;
        // border: #2ed573 1px solid;
        font-size: 1.5em;
        margin-left: 2px;
        border-radius: 2em;
        //  clip-path: ellipse(50% 30% at 50% 50%); /* 动态椭圆裁剪 */
        width: auto;
        height: auto;
        padding: 2px 5px 2px 2px;
        top: 2em;
        margin-top: 0.6em;

        &:hover {
          background-color: black;
        }

        span:nth-of-type(1) {
          font-size: 1.2em;
          padding-left: 5px;

        }

        span:nth-of-type(2) {
          font-size: 0.5em;
          // padding-right: 10px;
        }

        // .info-value {
        // font-size: 24px;
        // margin-top: 5px;

        &.normal {
          color: var(--normal-color);
        }

        &.success {
          color: var(--success-color);
        }

        &.warning {
          color: var(--warning-color);
        }

        &.error {
          color: var(--danger-color);
        }

        .unit {
          font-size: 12px;
          opacity: 0.8;
          // color: #fff;
          // margin-left: 4px;
        }

        .ON {
          color: #0ad35e;
        }

      }


      // 设备主要参数
      .device-parameters {
        position: absolute;
        font-size: 0.6em;
        // border: 1px solid #ccc;
        margin-left: 34%;
        max-width: 30%;
        min-width: 25%;
        height: 100;
        color: #c3c3c3;
        line-height: 100%;

        .parameter-item {
          line-height: 2.5em;

          .label {
            color: gray;
          }

          &:hover {
            // background: rgba(255, 255, 255, 0.1);
            color: #fff;
          }
        }

      }

      // 仪表 
      .gauge-panel {
        position: absolute;
        top: 0;
        right: 0;
        width: 38%;
        height: 100%;
        min-height: 2rem;
        // border: #299ed5 1px solid ;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0px; // 添加内边距

        .gauge-container {
          text-align: center;
          width: 100%;
          height: 102%;
          padding: 0; // 调整内边距
          line-height: 102%;
          padding-top: 3px;
          right: 2px;
          // padding-bottom: 2px;
          overflow: visible;

          /* 确保子元素可以超出边界显示 */
          &:first-child {
            overflow: visible;
            /* 确保子元素可以超出边界显示 */
            padding-top: 5px;
            right: 3px;

            canvas:hover {
              filter: contrast(1.2) brightness(1.2) saturate(1.2);
              transform: scale(1.2);
            }

          }


        }

        // 核心设备的仪表关统一样式
        .off {
          color: rgba(128, 128, 128, 0.5);
          filter: contrast(0.5) brightness(0.5) saturate(0.5);
          opacity: 0.5;
        }

      }

      // 核心设备主数据统一样式  
      .off {
        color: rgba(128, 128, 128, 0.547);
        // 作用是将文本设置为半透明，参数分别为颜色和透明度
        // div canvas {
        filter: contrast(0.9) brightness(0.5) saturate(0.5);
        // }
        // 作用是调整对比度，亮度和饱和度
      }

      .on {
        color: #0ad35e;
      }


    }




  }

  .center-panel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;

    .grid-container {
      display: grid;
      grid-template-columns: 30% 38.7% 30%;
      grid-template-rows: 32% 34% 32%;
      gap: 6px;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      padding: 0;
      margin: 0 auto;
      text-align: center;
      transition: all 0.3s ease;

      // z指定img样式选择器
      .grid-item:nth-of-type(1) .image-container img {
        max-width: 60%;
        // margin-left: 20px;
        padding: 10px;
        transform: scale(0.62);

        &:hover {
          filter: contrast(1.2) brightness(1.2) saturate(1.2);
          transform: scale(0.82);
        }
      }

      .grid-item:nth-of-type(2) .image-container {
        top: -20px;

        img {
          max-width: 100%;
          text-align: center;
          margin: 0 auto;
          // padding: 30px;
          transform: scale(0.52);

          &:hover {
            transform: scale(1);
            filter: contrast(1.2) brightness(1.2) saturate(1.3);
          }
        }
      }

      .grid-item:nth-of-type(3) .image-container {
        right: -30px;

        img {
          // right: 20px;
          max-width: 100%;
          text-align: center;
          // margin: 0 auto;
          // padding: 30px;
          transform: scale(0.52);
          // margin-right: 30px;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          height: 100%;
          object-fit: cover;
          width: 90%;

          // background-image: url(/src/assets/img/透明静态风机.png);
          &:hover {
            object-fit: cover;
            // background-image: url("src/assets/img/环保风力发电.gif");
            transform: scale(0.72);
            filter: contrast(1.0) brightness(1.05) saturate(1.2);
          }
        }
      }


      .grid-item:nth-of-type(4) .image-container img {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
        margin-left: 2em;
        // padding: 30px;
        transform: scale(0.62);

        // margin-right: 30px;
        &:hover {
          transform: scale(0.82);
          filter: contrast(1.2) brightness(1.0) saturate(1.8);
        }

      }

      .grid-item:nth-of-type(5) .image-container img {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
        transform: scale(0.72);

        &:hover {
          transform: scale(0.92);
          filter: contrast(1.2) brightness(1.1) saturate(1.2);
        }
      }

      .grid-item:nth-of-type(6) .image-container img {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
        font-size: 10em;
        transform: scale(0.62);
        padding-left: 70px;

        &:hover {
          transform: scale(0.92);
          filter: contrast(1.1) brightness(1) saturate(1.2);
        }
      }

      .grid-item:nth-of-type(7) .image-container img {
        max-width: 60%;
        padding: 10px;
        transform: scale(0.65);
        filter: contrast(0.2) brightness(0.5) saturate(0.5);

        &:hover {
          filter: contrast(1.2) brightness(1.2) saturate(1.1);
          transform: scale(0.85);
        }
      }

      .grid-item:nth-of-type(8) .image-container img {
        max-width: 90%;
        text-align: center;
        margin: 0 auto;
        transform: scale(0.62);

        &:hover {
          transform: scale(0.92);
          filter: contrast(1.1) brightness(1.1) saturate(1.2);
        }
      }

      .grid-item:nth-of-type(9) .image-container img {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
        padding-left: 30px;
        transform: scale(0.72);

        &:hover {
          transform: scale(0.92);
          filter: contrast(1.2) brightness(1.1) saturate(1.2);
        }
      }



      // 指定标题H3样式选择器
      .grid-item:nth-of-type(1) .image-container h3 {
        // text-align: left;
      }

      // 指定标题样式选择器
      .grid-item:nth-of-type(2) .image-container h3 {
        left: 40%;
        width: 6em;
        top: 10px;
        // transform: translateX(-50%);
      }

      .grid-item:nth-of-type(3) .image-container h3 {
        text-align: right;
        right: 30px;
      }

      .grid-item:nth-of-type(4) .image-container h3 {
        // text-align: left;
      }

      .grid-item:nth-of-type(5) .image-container h3 {
        left: 27%;
        width: 5em;
        top: 0px;
        font-size: 0.7em;
        z-index: -0;
        // font-size: 0.8em;
        line-height: 10px;
      }

      .grid-item:nth-of-type(6) .image-container h3 {
        text-align: right;
        text-align: right;
        right: 0px;
        top: 1em;
      }

      // 指定标题样式选择器
      .grid-item:nth-of-type(7) .image-container h3 {
        left: -5%;
        width: 6em;
        bottom: 0px;
      }

      // 指定标题样式选择器
      .grid-item:nth-of-type(8) .image-container h3 {
        left: 40%;
        width: 6em;
        bottom: 0px;
        // transform: translateX(-50%);
      }

      // 指定标题样式选择器
      .grid-item:nth-of-type(9) .image-container h3 {
        right: 0px;
        position: absolute;
        width: 6em;
        bottom: 0px;
        // transform: translateX(-50%);
      }

      .grid-item {
        background: rgba(255, 255, 255, 0.00);
        border-radius: 6px;
        padding: 4px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        transition: all 0.3s ease;
        z-index: +10;

        &:hover {
          transform: scale(1.02);
        }

        .image-container {
          height: 100%;
          width: 100%;
          position: relative;
          border-radius: 4px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          margin: 0 auto;
          padding: 0;

          &:hover {
            transform: scale(1.02);
            filter: contrast(0.9) brightness(0.95) saturate(1);

          }

          img {
            object-fit: cover;
            /* 保持比例并填充容器 */
            // flex: 1;
            max-width: 75%;
            height: calc(100% - 20px);
            object-fit: cover;
            text-align: center;
            z-index: +11;
            max-width: 100%;
            /* 图片最大宽度为容器宽度 */
            max-height: 100%;
            /* 图片最大高度为容器高度 */
            width: auto;
            /* 自动调整宽度 */
            height: auto;
            transition: all 0.4s ease;
            /* 自动调整高度 */
            // margin: 0 auto;
          }

          h3 {
            height: 20px;
            line-height: 20px;
            margin: 0;
            padding: 0 4px;
            // color: rgba(245, 222, 179, 0.341);
            color: #fff;
            font-size: 0.8em;
            // text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: rgba(0, 0, 0, 0.0);
            font-family: 'Poppins', sans-serif;
            // text-transform: uppercase;
            position: absolute;
            // top: 5px;
            // left: 5px;
            z-index: +10;
            filter: contrast(0.9) brightness(0.1) saturate(0.1);
            color: gray;

            &:hover {
              color: #2ed573;
              transform: scale(1.1);
              filter: contrast(1) brightness(1) saturate(1);
              // background: linear-gradient(90deg, #2ed573, #2ed573);
            }


          }


        }


      }

    }


  }

  // @import url('https://fonts.googleapis.com/css2?family=Source+Han+Sans+SC:wght@400;500;700&display=swap');

  // .left-panel,
  .right-panel {
    *{
      font-family: 'Source Han Sans SC', sans-serif;
      font-family: 'Noto Sans SC', sans-serif;
    }
    span {
      /* 防止文本阴影或发光效果 */
      text-shadow: none;
    }

    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 4px;
    padding: 10px;
    overflow-y: hidden; // 确保可以垂直滚动
    // overflow: auto;
    // 隐藏滚动条但保持滚动功能
    // -ms-overflow-style: none;
    /* IE and Edge */
    // scrollbar-width: none;
    /* Firefox */
    // &::-webkit-scrollbar {
    /* Chrome, Safari and Opera */
    // display: none;
    // }

    border: 1px solid transparent;
    border-radius: 8px;

    .info-card {
      margin-bottom: 15px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.05);
      border: none;
      border-radius: 4px;

      .info-title {
        font-size: 12px;
        opacity: 0.8;
      }

      .info-value {
        font-size: 24px;
        margin-top: 5px;

        &.normal {
          color: var(--success-color);
        }

        &.warning {
          color: var(--warning-color);
        }

        &.error {
          color: var(--danger-color);
        }

        .unit {
          font-size: 14px;
          opacity: 0.8;
          margin-left: 4px;
        }
      }
    }

    ::v-deep .el-tabs__nav.is-top {
      background-color: #f0f0f000;

      /* 自定义选项卡背景颜
      色 */
      &.is-active {
        color: #2ed573
      }
    }

    ::v-deep .el-tabs__item {

      // color:  var(--success-color);
      &:hover {
        color: var(--primary-color);

      }

      &.is-active {
        color: var(--success-color);
      }
    }

    ::v-deep .el-tabs__item {
      &:hover {
        // color: #2ed573;
        color: var(--success-color);
      }
    }

    ::v-deep .el-tabs__nav {
      background-color: #f0f0f017;
      /* 自定义选项卡背景颜
      色 */
    }

    ::v-deep .el-tabs__nav-wrap {

      // background-color: #f0f0f010;
      /* 自定义背景颜色 */
      // height: 4em;
      // line-height: 3em;
      &::after {
        background-color: #f0f0f01d;
        height: 1px;

      }
    }

    ::v-deep .el-tabs__active-bar {
      background-color: #fff;

      /* 自定义位置条背景颜色 */
    }

    ::v-deep .el-tabs__nav-scroll {
      // background-color: transparent;
      /* 设置为透明色 */
    }

    .el-tabs__item.is-active {
      color: var(--scroll-color);
    }

    .faults {
      color: rgb(250, 48, 48);
    }

    .warnings {
      color: wheat;
    }

    .important {
      color: rgb(121, 109, 225);
    }

    .el-tabs {
      height: 100%;
      display: flex;
      // flex-direction: column;

      .el-tabs__content {
        overflow: hidden;
        height: 100%;

        .el-tab-pane {
          overflow: hidden;
          height: 100%;
          padding-bottom: 20px;

          .event-cards {
            padding: 0px 0px 70px 0px;
            // height: 90%;
            // border: #2ed57432 1px solid;
            // overflow-y: scroll;
            overflow: auto;
            max-height: calc(100%);
            // max-height: 100vh;
            // overflow: scroll; // 保持可以滚动
            scrollbar-width: none; // 隐藏 Firefox 的滚动条
            -ms-overflow-style: none;

            &::-webkit-scrollbar {
              display: none; // 隐藏滚动条
            }

            .event-card {
              // background: rgba(102, 108, 104, 0.18);
              padding: 3px 5px;
              margin-bottom: 2px;
              border-radius: 5px;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              font-size: 0.6rem;
              color: beige;
              border: 1px solid rgba(255, 255, 255, 0.1);
              box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
              background: rgba(255, 255, 255, 0.05);
              line-height: 100%;

              /* 立体效果 */
              &:last-of-type {
                margin-bottom: 30px;
              }

              &:hover {
                background: rgba(255, 255, 255, 0.1);
              }

              .event-title {
                letter-spacing: 0.9px;
                /* 增加字母间距 */
                font-size: 0.5rem;
                box-shadow: none;
                color: #2ed573;
                font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                margin-bottom: 5px;

                span.faults {
                  color: gainsboro;
                }

                span.warnings {
                  color: gainsboro;
                }

                span.important {
                  color: gainsboro;
                }
              }

              .event-content {
                letter-spacing: 0.5px;
                padding-top: 2px;

                /* 增加字母间距 */
                font-size: 0.6rem;

                span {
                  line-height: 1.2em;
                }

                box-shadow: none;
                font-family: system-ui,
                -apple-system,
                BlinkMacSystemFont,
                'Segoe UI',
                Roboto,
                Oxygen,
                Ubuntu,
                Cantarell,
                'Open Sans',
                'Helvetica Neue',
                sans-serif;
              }
            }

          }

        }
      }

      #app .el-tabs__header {
        margin: 0 0 5px;
        padding-bottom: 5px;
      }

    }

  }
}

//没有src会直接隐藏 
img[src=""],
img:not([src]) {
  opacity: 0;
}

// </style>